<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
	<title>后台管理系统首页</title>

	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script src="js/jquery.js"></script>
	<style type="text/css">
		html,
		body {
			height: 100%;
		}
		
		.box {
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699FF', endColorstr='#6699FF');
			/*  IE */
			background-image: linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image: -o-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image: -moz-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image: -webkit-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image: -ms-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			margin: 0 auto;
			position: relative;
			width: 100%;
			height: 100%;
		}
		
		.login-box {
			width: 100%;
			max-width: 500px;
			height: 400px;
			position: absolute;
			top: 50%;
			margin-top: -200px;
			/*设置负值，为要定位子盒子的一半高度*/
		}
		
		@media screen and (min-width:500px) {
			.login-box {
				left: 50%;
				/*设置负值，为要定位子盒子的一半宽度*/
				margin-left: -250px;
			}
		}
		
		.form {
			width: 100%;
			max-width: 500px;
			height: 275px;
			margin: 25px auto 0px auto;
			padding-top: 25px;
		}
		
		.login-content {
			height: 300px;
			width: 100%;
			max-width: 500px;
			background-color: rgba(255, 250, 2550, .6);
			float: left;
		}
		
		.input-group {
			margin: 0px 0px 30px 0px !important;
		}
		
		.form-control,
		.input-group {
			height: 40px;
		}
		
		.form-group {
			margin-bottom: 0px !important;
		}
		
		.login-title {
			padding: 20px 10px;
			background-color: rgba(0, 0, 0, .6);
		}
		
		.login-title h1 {
			margin-top: 10px !important;
		}
		
		.login-title small {
			color: #fff;
		}
		
		.link p {
			line-height: 20px;
			margin-top: 30px;
		}
		
		.btn-sm {
			padding: 8px 24px !important;
			font-size: 16px !important;
		}
		
		.box-title {
			width: 100%;
			text-align: center;
			font-size: 42px;
			font-style: italic;
			font-weight: bold;
			color: #ffffff;
			position: absolute;
			top: -30%;
			letter-spacing: 8px;
		}
	</style>

</head>

<body>
	<div class="box" style="overflow: hidden">

		<div class="login-box">
			<div class="box-title">后台管理系统</div>
			<div class="login-title text-center">
				<h1><small>登录</small></h1>
			</div>
			<div class="login-content ">
				<div class="form">
					<form action="#" method="post">
						<div class="form-group">
							<div class="col-xs-12  ">
								<div class="input-group">
									<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
									<input type="text" id="username" name="loginName" class="form-control" placeholder="用户名">
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-12  ">
								<div class="input-group">
									<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
									<input type="password" id="password" name="password" class="form-control" placeholder="密码">
								</div>
							</div>
						</div>
						<div class="form-group form-actions">
							<div class="col-xs-4 col-xs-offset-4 ">
								<button type="button" class="btn btn-sm btn-info" id="btnLogin"><span class="glyphicon glyphicon-off"></span> 登录</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

</body>
<script>
	$(function () {
		$('#btnLogin').click(function () {
			var uv = $('#username').val();
			var pv = $('#password').val();
			if (!uv || !pv) {
				return;
			}

			var base = 'http://api.hrdzc.cn';
			var isDev = false;
			if (window.location.href.indexOf('dev') != -1) {
				base = 'http://test.hrdzc.cn';
				isDev = true;
			}else{
			    base='http://api.jshrdtz.com';
			}
			$
				.ajax({
					url: base + '/spi/login',
					method: 'post',
					data: JSON.stringify({
						loginName: uv,
						password: pv,
					}),
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					contentType: 'application/json',
					dataType: 'json'
				})
				.then((body, flag, response) => {
					if (body && body.code != 100) {
						window.location.href =  isDev ? '/?dev' : '/';
					} else {
						alert(body.message);
					}
				});
		});
	})

</script>

</html>